import React from 'react';
import { connect } from 'dva';
import config from '@/src/utils/config';
import apiCreator from '@/src/utils/apiCreator';
import { UploadC, PrimaryC, FirstHeaderC, SecondHeaderC } from '../../components';

const api = apiCreator();

class UploadCDemo extends React.Component {
  state = {
    file: undefined,
    ref: undefined,
    ref2: undefined,
    fileList: [],
  };

  componentDidMount() {
    setTimeout(() => {
      this.setState({
        fileList: [
          { title: '上传测试.docx', value: '1633883759788_000_000_CB30786BC5ADEA4D12ED29E3188280AB8DE357B5336A723A9235C4DEA7FD26ED' },
          { title: '批量导入模板.xls', value: '1634181931247_000_000_36D26EB7F0F8C72C5D9161F462D73A99B43D3504236D7109357A2B50490E7316' },
        ],
      });
    }, 6000);
  }

  upload = (e) => {
    const formData = new FormData();

    formData.append('file', e);
    formData.append('type', 'stock');

    // 这段到时可放到model和api文件中
    api
      .uploadFile(`${config.interfaces.type10}portfolio-server/flowSecurity/importFlow`, {}, formData)
      .then((res) => {
        console.log(res, 'res');
      })
      .catch((e) => {
        console.log(e, 'error');
      });
  };

  // 拿到文件后，进一步处理
  getFile = (file) => {
    const formData = new FormData();
    formData.append('file', file);
    this.props.dispatch({
      type: 'stockGroupOrderM/upLoad',
      payload: formData,
      callback: (data) => {
        if (data) {
          console.log('3.3', data);
        }
      },
    });
  };

  render() {
    return (
      <div style={{ padding: '20px' }}>
        <FirstHeaderC title='1 初始化加载（type=1）' />
        <SecondHeaderC title='1.1 同步有初始值 最多3条' topHeight={true} />
        <div style={{ width: '300px' }}>
          <UploadC
            accept='.docx'
            value={[
              { title: '上传测试.docx', value: '1633883759788_000_000_CB30786BC5ADEA4D12ED29E3188280AB8DE357B5336A723A9235C4DEA7FD26ED' },
              { title: '批量导入模板.xls', value: '1634181931247_000_000_36D26EB7F0F8C72C5D9161F462D73A99B43D3504236D7109357A2B50490E7316' },
            ]}
            type={1}
            max={3}
            showUploadList={true}
            onUpload={(e) => {
              console.log('1.1', e);
            }}
          />
        </div>

        <SecondHeaderC title='1.2 异步有初始值（type=1）' topHeight={true} />
        <div style={{ width: '300px' }}>
          <UploadC
            accept='.docx'
            value={this.state.fileList}
            fileListLoading={!this.state.fileList?.length > 0}
            type={1}
            showUploadList={true}
            onUpload={(e) => {
              console.log('1.2', e);
            }}
          />
        </div>

        <FirstHeaderC title='2 提供功能' topHeight={true} />
        <SecondHeaderC title='2.1 禁用删除和下载（type=1）' topHeight={true} />
        <div style={{ width: '300px' }}>
          <UploadC
            isDowm={false}
            isDelete={false}
            type={1}
            showUploadList={true}
            onUpload={(e) => {
              console.log('2.1', e);
            }}
          />
        </div>

        <SecondHeaderC title='2.2 限制上传类型(docx和png)（type=1）' topHeight={true} />
        <UploadC
          accept='.docx,.png'
          type={1}
          showUploadList={true}
          onUpload={(e) => {
            console.log('2.2', e);
          }}
        />

        <FirstHeaderC title='3 支持业务场景' topHeight={true} />
        <SecondHeaderC title='3.1 附件上传，使用通用接口，将文件存放到公共存储中，组件抛出文件id列表，业务模块自行取（type=1）' topHeight={true} />
        <UploadC
          type={1}
          showUploadList={true}
          onUpload={(e) => {
            console.log('3.1', e);
          }}
          onRef={(e) => this.setState({ ref: e })}
        />
        <div>获取到的文件信息：{JSON.stringify(this.state?.tempFileList)}</div>
        <PrimaryC
          title='获取文件列表（对应的文件id列表）'
          onClick={() => {
            this.setState({
              tempFileList: this.state.ref?.getFileList(),
            });
          }}
          style={{ marginTop: 20 }}
        />

        <SecondHeaderC title='3.2 文件导入，组件抛出文件流，后续业务模块以文件流为入参，自行处理（type=2）' topHeight={true} />
        <UploadC
          type={2}
          onUpload={(e) => {
            this.setState({ file: e });
          }}
        />
        <div>文件流：{JSON.stringify(this.state.file)}</div>
        <PrimaryC
          title='获取文件列表（文件流）并上传'
          style={{ marginTop: '20px' }}
          onClick={() => {
            console.log('3.2 文件列表:', this.state.file);
            this.upload(this.state.file);
          }}
        />

        <SecondHeaderC title='3.3 文件导入，无列表，点击后直接导入，组件抛出文件流，后续业务模块以文件流为入参，自行处理（type=2）' topHeight={true} />
        <UploadC
          title='导入'
          accept='.xlsx,.xls'
          showUploadList={false}
          type={2}
          onUpload={(e) => {
            this.setState({
              file3: e,
            });
            this.getFile(e);
          }}
        />
        <div>文件流：{JSON.stringify(this.state.file3)}</div>
        <SecondHeaderC title='自动上传 单个文件上传，得到文件id(type=1)' topHeight={true} />
        <UploadC
          type={1}
          max={1}
          showUploadList={true}
          onUpload={(e) => {
            console.log('自动上传 单个文件上传', e);
          }}
        />
      </div>
    );
  }
}

export default connect(({ stockGroupOrderM }) => ({ stockGroupOrderM }))(UploadCDemo);
